<template>
  <div id="curriculum_details">
    <div class="info_title">课程详情</div>
    <div class="line"></div>
    <div class="curriculum_table">
      <div>
        <table class="table" cellspacing="0" v-if="isHasData">
          <thead class="thead">
            <tr>
              <td style="width: 3rem;">课节名称</td>
              <td style="width: 4rem;">上课时间</td>
              <td style="width: 4rem;">课程资料</td>
              <td style="width: 3rem;">学习状态</td>
              <td style="width: 2rem;">操作</td>
            </tr>
          </thead>
          <tbody class="tbody">
            <tr v-for="item,index in curriclumList">
              <td v-if="item.classSyllabusName != null ">{{item.classSyllabusName}}</td>
              <td v-else>第{{item.orderBy}}次课</td>
              <td>{{item.startTime}}</td>
              <td>
                <div v-for="res in item.classResourcesDtoList" :key="res.fileId">{{res.fileName}}</div>
              </td>
              <td>{{item.status}}</td>
              <td
                style="color:#37a169;cursor: pointer;"
                @click="gotoDetails(item)"
              >{{item.status == '完成'?'回放':'进入教室'}}</td>
            </tr>
          </tbody>
        </table>
        <div v-else class="order_tab_content_noitem">暂未排课,请等待!</div>
      </div>
      <el-pagination
        v-if="isHasData"
        class="page"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="tabledisplayObj.currPage"
        @size-change="pageSizeChange"
        @current-change="tabledisplayChangePage"
        :total="tabledisplayObj.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
let vm;
export default {
  data: function() {
    return {
      tabledisplayObj: {
        classId: "",
        currPage: 1,
        pageSize: 10,
        total: 0
      },
      isHasData: true,
      curriclumList: []
    };
  },
  methods: {
    pageSizeChange(val) {
      this.tabledisplayObj.pageSize = val;
      this.init();
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      this.tabledisplayObj.currPage = val;
      this.init();
    },
    getStatus(startTime) {
      let startTime1 = new Date();
      console.log(startTime1);
      //定义结束时间
      let endTime = new Date(startTime.replace(/-/g, "/"));
      console.log(endTime);
      //算出中间差并且已毫秒数返回; 除以1000将毫秒数转化成秒数方便运算；
      let countDown = (endTime.getTime() - startTime1.getTime()) / 1000;
      console.log(countDown);
      return countDown;
    },
    gotoDetails(item) {
      switch (item.status) {
        case "即将开始":
          if (item.studentUrl == null || item.studentUrl == "") {
            this.$alert("该课节暂无上课视频，请稍后再试!", "暂无视频", {
              confirmButtonText: "确定",
              type: "warning",
              center: true,
              callback: action => {}
            });
          } else {
            window.open(item.studentUrl, "_blank");
          }
          break;
        case "未学习":
          this.$alert(
            "该课节的上课时间是：" +
              item.startTime +
              "\n请提前20分钟进入教室上课",
            "等待上课",
            {
              confirmButtonText: "确定",
              type: "warning",
              center: true,
              callback: action => {}
            }
          );
          break;
        case "正在上课":
          if (item.studentUrl == null || item.studentUrl == "") {
            this.$alert("该课节暂无上课视频，请稍后再试!", "暂无视频", {
              confirmButtonText: "确定",
              type: "warning",
              center: true,
              callback: action => {}
            });
          } else {
            if (!tool.isChrome()) {
              this.$alert("小鳄鱼课堂仅支持谷歌浏览器", "小鳄鱼课堂", {
                confirmButtonText: "谷歌浏览器下载",
                type: "warning",
                center: true
              })
                .then(() => {
                  window.open("https://www.google.cn/chrome/");
                })
                .catch(() => {});
            } else {
              window.open(item.studentUrl, "_blank");
            }
          }
          break;
        case "完成":
          if (item.playUrl == null || item.playUrl == "") {
            this.$alert("该课节暂无回放视频", "暂无视频", {
              confirmButtonText: "确定",
              type: "warning",
              center: true,
              callback: action => {}
            });
          } else {
            window.open(item.playUrl, "_blank");
          }
          break;
        default:
      }
    },
    init() {
      api.queryClassSyllabus(vm.tabledisplayObj).then(function(data) {
        if (data.resultCode == 2000) {
          vm.isHasData = data.list.length != 0;
          data.list.forEach(item => {
            item.status = "";
            if (item.attendMode == 1) {
              item.status = "完成";
            } else {
              if (vm.getStatus(item.startTime) > 0) {
                item.status =
                  vm.getStatus(item.startTime) <= 1200 ? "即将开始" : "未学习";
              } else {
                item.status =
                  vm.getStatus(item.endTime) > 0 ? "正在上课" : "完成";
              }
            }
          });
          vm.curriclumList = data.list;
          vm.tabledisplayObj.total = data.totalCount;
          console.log(vm.curriclumList);
        } else {
          tool.message({
            showClose: true,
            message: data.message,
            type: "warning"
          });
        }
      });
    }
  },
  created: function() {
    vm = this;
    console.log(this.$route.query.classId);
    let classId = tool.decode(this.$route.query.classId);
    let isTrialClass = this.$route.query.isTrialClass;
    if (classId != null) {
      vm.tabledisplayObj.classId = classId;
      if (isTrialClass) {
        vm.tabledisplayObj.isTrialClass = 1;
      }
    } else {
      tool.message({
        showClose: true,
        message: "系统错误，请联系管理员",
        type: "error"
      });
    }

    vm.init();
  }
};
</script>
<style scoped src="../../style/module/table.css"></style>
<style lang="scss">
#curriculum_details {
  height: 100%;
  width: 100%;
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 0.2rem;
  .order_tab_content_noitem {
    padding: 0.3rem 0.2rem;
    text-align: center;
    font-size: 0.16rem;
    color: #666666;
    letter-spacing: 0.06rem;
  }
  .info_title {
    padding: 0.23rem 0.34rem 0.16rem;
    font-size: 0.2rem;
    color: #333333;
  }
  .line {
    width: 100%;
    height: 1px;
    background: #eeeeee;
  }
  .curriculum_table {
    padding: 0.24rem 0.42rem 0rem 0.42rem;
    color: #333333;
    font-size: 0.16rem;
    .starting_title {
      font-size: 0.18rem;
      margin-bottom: 0.22rem;
    }
    .page {
      margin: 0.1rem 0;
    }
    // .el-pagination {
    //   white-space: nowrap;
    //   padding: 0.15rem 0.05rem;
    //   color: #666666;
    //   font-weight: 500;
    // }
    // .el-pager li {
    //   margin: 0 0.04rem;
    //   font-size: 0.14rem;
    //   min-width: 0.2rem;
    // }
    // .el-pager li.active {
    //   background: #1e9b59;
    //   color: #ffffff;
    //   border-radius: 50%;
    // }
    // .page > span,
    // .page > button,
    // .page li {
    //   height: 0.2rem !important;
    //   line-height: 0.2rem !important;
    // }
  }
}
</style>